<template>
  <div
    id="goodsCollection"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="0"
    infinite-scroll-immediate-check="false"
  >
    <div class="count" v-if="count != ''">
      共<span>{{ count }}</span
      >个收藏
    </div>
    <div class="goodsBox">
      <div
        class="goodsItem"
        v-for="(item, index) in goodsList"
        :key="'a' + index"
      >
        <div class="topBox">
          <img :src="item.proLogo" class="avatorImg" />
          <div class="infoRight">
            <div class="goodsInfo">
              <!-- 来源 -->
              <div style="margin-right: 5px;margin-bottom:4px;">
                <SourceIcon :sourceid="item.profrom" />
              </div>
              <el-tooltip
                class="item"
                effect="light"
                :content="item.proTitle"
                placement="top"
                popper-class="mytooltip"
              >
                <span>{{ item.proTitle }}</span>
              </el-tooltip>
            </div>
            <div class="otherInfo">
              <p>
                ￥<span>{{ item.proPrice }}</span>
              </p>
              <p>
                ￥<span>{{ item.proCostPrice }}</span>
              </p>
            </div>
            <p class="textClass">
              分类：<span>{{ item.categoryNames }}</span>
            </p>
          </div>
        </div>
        <div class="dataBox">
          <div class="dataItem">
            <p>{{ format_num(item.views) }}</p>
            <p>抖音浏览量</p>
          </div>
          <div class="dataItem">
            <p>{{ format_num(item.volume) }}</p>
            <p>抖音销量</p>
          </div>
          <div class="dataItem">
            <p>{{ formatRate(item.commissionRate, 1, 1) }}</p>
            <p>佣金比例</p>
          </div>
          <div class="dataItem">
            <p>{{ formatRate(item.conversionRatio, 1, 1) }}</p>
            <p>转化率</p>
          </div>
          <div class="dataItem">
            <p>{{ format_num(item.associatedVideo) }}</p>
            <p>关联视频数</p>
          </div>
          <div class="dataItem">
            <p>{{ format_num(item.associatedlive) }}</p>
            <p>关联直播数</p>
          </div>
          <div class="dataItem">
            <p>{{ format_num(item.views30Day) }}</p>
            <p>全网销量</p>
          </div>
          <div class="dataItem">
            <p>{{ format_num(item.author30Day) }}</p>
            <p>热推达人</p>
          </div>
        </div>
        <div class="optionsBox">
          <el-popover placement="bottom" trigger="hover" class="ewmT">
            <vue-qr
              :size="150"
              :margin="0"
              :auto-color="true"
              :dot-scale="1"
              :text="item.proCode"
            />
            <img src="@/assets/wang/video/ewm.png" slot="reference" />
          </el-popover>
          <el-tooltip
            class="item"
            effect="light"
            content="取消收藏"
            placement="top"
            popper-class="mytooltip"
            :hide-after="2000"
          >
            <img
              src="@/assets/wang/video/liked.png"
              class="starImg"
              @click="cancelStar(item.proId, index)"
            />
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="light"
            content="商品详情"
            placement="top"
            popper-class="mytooltip"
            :hide-after="2000"
          >
            <img
              src="@/assets/wang/video/more.png"
              @click="go_to_page01(item.proId)"
            />
          </el-tooltip>
        </div>
      </div>
    </div>
    <div
      v-loading="loading"
      v-if="!(goodsList.length < (page - 1) * 15)"
      class="loading grayLoading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
    ></div>
    <p
      class="nothing"
      v-show="goodsList.length != 0 && goodsList.length < (page - 1) * 15"
    >
      我是有底线的～
    </p>
    <div class="empty addTop" v-show="!loading && goodsList.length == 0">
      <img src="@/assets/liu/zw.png" />
      <p>您还未收藏任何内容哦~</p>
    </div>
  </div>
</template>

<script>
import VueQr from "vue-qr";
import SourceIcon from "@/component/SourceIcon.vue";

export default {
  name: "goodsCollection",
  components: { VueQr, SourceIcon },
  data() {
    return {
      page: 1,
      cancel01: null,
      cancel02: null,
      goodsList: [],
      count: "",
      busy: false,
      loading: true,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.GetGoodsList();
  },
  mounted() {},

  methods: {
    GetGoodsList() {
      let that = this;
      that.loading = true;
      that.busy = true;
      that.$axios
        .get(
          "/api/collection/GetProductCollection",
          {
            params: {
              pageIndex: that.page,
              pageSize: 15,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01 != null) {
                that.cancel01();
              }
              that.cancel01 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            that.page += 1;
            that.goodsList = that.goodsList.concat(res.data.data);
            that.count = res.data.count;
            res.data.data.length < 15
              ? (that.busy = true)
              : (that.busy = false);
          }
          that.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 取消收藏
    cancelStar(id, index) {
      let that = this;
      that.$axios
        .post(
          "/api/collection/CancelCollection",
          {
            CollectId: id,
            Module: 5, //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel02 != null) {
                that.cancel02();
              }
              that.cancel02 = c;
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            that.goodsList.splice(index, 1);
            that.count--;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 商品详情
    go_to_page01(id) {
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}/0`,
      });
      window.open(router.href, "_blank");
    },
    loadMore() {
      this.GetGoodsList();
    },
  },
};
</script>
<style lang='less' scoped>
#goodsCollection {
  .count {
    padding-top: 20px;
    color: #888;
    font-size: 14px;
    span {
      color: #fd7f2c;
      font-family: DINAlternate-Bold;
    }
  }
  .addTop {
    margin-top: 150px;
  }
  .goodsBox {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
    flex-wrap: wrap;
    .goodsItem {
      box-sizing: border-box;
      width: 32%;
      background-color: #fff;
      margin-right: 20px;
      margin-bottom: 20px;
      position: relative;
      padding: 24px 20px 0 20px;
      .topBox {
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        padding-bottom: 19px;
        border-bottom: solid 1px #e5e5e5;
        .avatorImg {
          width: 68px;
          height: 68px;
          border-radius: 20px;
          border: 1px solid #e5e5e5;
        }
        .infoRight {
          margin-left: 18px;
          .goodsInfo {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: 46%;

            // img {
            //   width: 18px;
            //   height: 18px;
            //   margin-bottom: 4px;
            // }
            span {
              font-size: 16px;
              color: #222222;
              font-weight: 600;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }
          }
          .otherInfo {
            padding-top: 4px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            p:nth-of-type(1) {
              font-size: 16px;
              color: #ea1b0b;
              span {
                font-family: DINAlternate-Bold;
              }
            }
            p:nth-of-type(2) {
              text-decoration: line-through;
              font-size: 14px;
              color: #888888;
              padding-left: 6px;
              font-family: DINAlternate-Bold;
            }
          }
          .textClass {
            font-size: 14px;
            color: #888888;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            padding-top: 5px;
            span {
              color: #222222;
            }
          }
        }
      }
      .dataBox {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-bottom: 25px;
        .dataItem {
          width: 25%;
          padding-top: 25px;
          p {
            text-align: center;
          }
          p:nth-of-type(1) {
            font-size: 18px;
            color: #222222;
            font-family: DINAlternate-Bold;
          }
          p:nth-of-type(2) {
            font-size: 14px;
            color: #888888;
          }
        }
      }
      .optionsBox {
        // width: 22%;
        position: absolute;
        top: 18px;
        right: 24px;
        display: flex;
        img {
          // width: 26%;
          width: 32px;
          height: 32px;
          margin-left: 12px;
          cursor: pointer;
        }
      }
    }
    .goodsItem:nth-of-type(3n) {
      margin-right: 0;
    }
  }
}
</style>